<!DOCTYPE html>
<html>

<style>
	.explain_box {
		padding: 8px 0 0 5px;
		border-top: 1px dashed #dbdbdb;
	}
</style>

<body class="bgf6">

<div th:include="common/bookTop :: commonTop"></div>
	
	<div class="main-body pb100" id="app">
		<div class="container pt10">

				<!--			面包屑-->
			<div class="bread-nav bgff">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>{{bookDetail.fistNavName}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{bookDetail.secondNavName}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{bookDetail.thirdNavName}}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<br>

			<el-row>
				<el-col :span="6">
					<div class="grid-content">
						<img :src="bookDetail.pictureUrl" style="width:190px; height: 279px;">
					</div>
				</el-col>

				<el-col :span="18">
					<div class="grid-content">
						<div class="explain_box">
							<h1>{{bookDetail.author}}</h1><br>
							<p >作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;者：<span>{{bookDetail.author}}</span></p><br>
							<p >价格：<span>{{bookDetail.price}}</span></p><br>
							<p>字&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数：{{bookDetail.wordNum}}</p><br>
						</div>

						<div class="explain_box">
							<el-button @click="addCard" type="danger" plain>添加购物车</el-button>
							<img src="/img/card.jpg" style="width: 48px;height: 48px">
						</div>

					</div>
				</el-col>

			</el-row>


			<el-divider content-position="left"></el-divider>


			<el-tabs type="border-card">
				<el-tab-pane label="读书简介">
					<div style="padding: 30px 60px">
						<span v-html="formatBookProfile"></span>
					</div>
				</el-tab-pane>
			</el-tabs>

		</div>
	</div>

<script type="text/javascript">

	var app = new Vue({
		el : '#app',
		data : {
			bookDetail : {}
		},
		created : function() {
			//加载图书详情
			this.loadBookDetail();
		},

		computed : {
			formatBookProfile : function () {
				console.log('>>>>>>7777');
				if (this.bookDetail.profile == undefined) {
					return '';
				}
				return this.bookDetail.profile.replace(/。/g, '<br>')
			}
		},
		methods : {
			addCard : function() {
				atm.ajax({
					url : '/card/addCard',
					requestMethod : 'POST',
					data : {
						commodityId : [[${bookId}]]
					},
					success : function (responseData) {
						window.location.href = '/card/toCard.html';
					}
				});
			},
			loadBookDetail : function () {
				let that = this;
				atm.ajax({
					url : '/commodity/loadBookDetail',
					requestMethod : 'POST',
					data : {
						bookId : [[${bookId}]]
					},
					success : function (responseData) {
						that.bookDetail = responseData.data;
					}
				});
			}
		}
	});

</script>
</body>
</html>
